@import "@/styles/Variables"
.treeBar
  z-index: 100
  display: flex
  flex-direction: column
  width: 250px
  max-width: 500px
  background-color: $viceBGC
  overflow: hidden
  overflow-y: auto
.treeWrapper
  padding: 1rem
  width: 500px
.treeTitle
  width: 100%
  padding: 4px
  font-size: large
  display: flex
  justify-content: center
  border-bottom: 4px solid #bbb
  position: sticky
  top: 0
  z-index: 100
  background-color: white
  user-select: none
  h3
    margin-bottom: 0
    white-space: nowrap
    overflow: hidden

.Dragger
  height: 100%
  width: 0
  display: flex
  align-items: center
  overflow: visible

.rightDragger
  @extend .Dragger

.leftDragger
  @extend .Dragger
  justify-content: flex-end

.triangle
  min-width: 20px
  height: 160px
  box-shadow: 0px 0px 5px #aaa
  display: flex
  font-size: 10px
  justify-content: center
  align-items: center
  background-color: $viceBGC
  z-index: 100
  user-select: none
  &:hover
    cursor: pointer
